<template>
  <a-drawer
    v-bind="drawerTwo"
    v-model:visible="visibleValue"
  >
    <!-- form -->
    <div class="orderManageDetail__content">

      <!-- <div class="orderStatus"><span>{{orderStatus.title}}</span><span>{{ data[orderStatus.key] }}</span></div> -->
      <!-- layout="inline" -->
      <a-form :model="formData">
        <a-form-item
          class="formItem"
          v-for="child in formData.list"
          :key="child.key"
          :label="child.title"
        >
          {{ data[child.key] }}
        </a-form-item>
      </a-form>
      <!-- <div class="txts">
        <div
          class="txt"
          v-for="child in formData.lists"
          :key="child.key"
          :label="child.title"
        >
          <span>{{child.title}}</span>
          <span>{{ data[child.key] }}</span>
        </div>
      </div> -->
    </div>
    <!-- footer -->
    <div class="storeManageDetail__footer">
      <a-button
        style="margin-right: 8px"
        @click="visibleValue = false"
      >取消</a-button>
      <a-button
        type="primary"
        @click="visibleValue = false"
      >确定</a-button>
    </div>
  </a-drawer>
</template>
<script>
import { ref, defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['update:visible'],
  computed: {
    visibleValue: {
      get () {
        return this.visible;
      },
      set (value) {
        this.$emit('update:visible', value);
      },
    },
  },
  setup () {
    const drawerTwo = ref({
      title: '订购详情',
      width: 800,
    });
    const state = reactive({
      // orderStatus: { title: '订单状态', key: 'status' },
      formData: {
        title: '基本信息',
        list: [
          { title: '订购店铺', key: 'shopName' },
          { title: '创建时间', key: 'createTime' },
          { title: '活动类型', key: 'activity' },
          { title: '服务名称', key: 'orderDesc' },
          { title: '开通凭证', key: 'voucher' },
          { title: '订单编号', key: 'orderSn' },
          { title: '订单类型', key: 'orderType' },
          { title: '员工ID', key: 'staffId' },
          { title: '员工名字', key: 'staffName' },
          { title: '员工电话', key: 'staffPhone' },
          { title: '开始时间', key: 'startTime' },
          { title: '到期时间', key: 'endTime' },
          { title: '支付金额/元', key: 'payAmount' },
          { title: '服务时长', key: 'serviceYear' },
          { title: '店铺ID', key: 'shopId' },
        ],
        // lists: [
        // ]
      },
    });

    return {
      ...toRefs(state),
      drawerTwo,
    };
  },
});
</script>
<style lang="less">
// .formItem {
//   display: inline-block;
//   flex: 1;
// }
</style>
